<template>
  <div class="brandList">
    <scroll-view scroll-y="true" :style="{'height':totalHeight+'px'}" scroll-with-animation="true"
                 :scroll-into-view="currentLetter" scroll-top="0">
      <div class="brandListhot">
        <h2>热门国家/地区</h2>
        <ol>
          <li v-for="(item,index) in hotList" :key="index" @click="checkItem(item)">
            {{item.chinese_name}}
          </li>
        </ol>
      </div>
      <ul v-for="(lettersItem,index) in lettersList"
          :key="index" :id="[lettersItem == '#' ? 'mini' : lettersItem]">
        <h2 style="background: #f2f2f2">{{lettersItem}}</h2>
        <li v-for="(countryItem,countryIndex) in letterMap[lettersItem]" :key="countryIndex"
            @click.stop="checkItem(countryItem)"
            data-index="countryIndex" data-val="countryItem"
            data-types="list">
          {{countryItem.chinese_name}}
        </li>
      </ul>
    </scroll-view>
    <div class="country-letter">
      <span class="letterItem" v-for="(letter,index) in lettersList" :key="index" @click="scrollToPosition(letter)"
            data-item="letter">{{letter}}</span>
    </div>
    <placeholder :show.sync="isPageEmpty" :message.sync="emptyMsg" :hidBtn="hidBtn" @tryAgain="onTap"/>
  </div>
</template>

<script>
  import common from '@/utils/common'
  import Compator from '@/utils/compare'
  import {setStorage, getStorage} from '@/utils/wechat'
  import placeholder from '@/components/placeholder'

  export default {
    data() {
      return {
        isPageEmpty: false,
        emptyMsg: '',
        hidBtn: false,
        countrysData: [],
        totalHeight: 0,
        currentLetter: '',
        letterMap: {},
        hotList: [],
        lettersList: []
      }
    },
    components: {
      placeholder
    },
    onLoad() {
      this.totalHeight = common.getWindowHeight()
      this.$wx.setTitleBarTitle('选择国家')
    },
    created() {

    },
    mounted() {
      this.getCountryCode()
    },
    onUnload() {
      this.currentLetter = ''
      this.letterMap = {}
      this.hotList = []
      this.lettersList = []
    },
    methods: {
      onTap(){
        this.getCountryCode()
      },
      async getCountryCode() {
        try {
          this.isPageEmpty = false
          let res = getStorage("countryCode")
          this.countrysData = res
          if (this.countrysData) {
            this.handlerCountry()
            return
          }
        } catch (e) {
          console.log(e)
        }
        const resData = await this.$fly.post(this.$url.URL_GETCOUNTRYCODE)
        if (resData.successCode) {
          this.countrysData = resData.data.country_code
          if (this.$wx.isArrayEmpty(this.countrysData)) {
            this.isPageEmpty = true
            this.emptyMsg = '暂无国家地区'
            this.hidBtn = true
            return
          }
          setStorage("countryCode", this.countrysData)
          this.handlerCountry()
        } else {
          this.isPageEmpty = true
          this.emptyMsg = resData.message
        }
      },
      handlerCountry() {
        Array.sort(this.countrysData, Compator.compare('first_char'))
        for (var i = 0; i < this.countrysData.length; i++) {
          const countryItem = this.countrysData[i]
          if (countryItem.is_hot == 1) {
            this.hotList = this.hotList.concat(countryItem)
          }
          const itemLetter = countryItem.first_char
          if (!this.lettersList) {
            this.lettersList = new Array()
          }
          if (this.lettersList.indexOf(itemLetter) == -1) {
            this.lettersList = this.lettersList.concat(itemLetter)
          }
          if (!this.letterMap[itemLetter]) {
            this.letterMap[itemLetter] = []
          }
          this.letterMap[itemLetter] = this.letterMap[itemLetter].concat(countryItem)
        }
      },
      checkItem(item) {
        this.$root.$eventHub.$emit('countryCodeChange', item)
        this.$wx.back(1)
      },
      scrollToPosition(letter) {
        this.currentLetter = letter == '#' ? 'mini' : letter
      },
    }
  }
</script>

<style>
  .brandListhot h2 {
    padding: 8px 4%;
    font-size: .9em;
    color: #999
  }

  .brandListhot ol {
    background-color: #fff;
    overflow: hidden;
    padding: 2% 0
  }

  .brandListhot ol li {
    width: 25%;
    text-align: center;
    line-height: 2.6em;
    float: left
  }

  .brandList ul h2 {
    padding: 8px 4%;
    font-size: .9em;
    color: #999
  }

  .brandList ul li {
    padding: 2px 4%;
    line-height: 2.6em;
    border-bottom: 1px #faf9f7 solid;
    background: #FFF
  }

  .brandList ul li span {
    color: #c2141a
  }

</style>
